import React,{Component} from 'react'
import {Link,browserHistory} from 'react-router';
import { Menu, Dropdown,message} from 'antd';
import {connect} from 'react-redux'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
const SubMenu = Menu.SubMenu;
class HeaderMenu extends Component {
	constructor(args) {
		super();
		this.state= {
			job : [],
			channelId:'',
		}
	}
	handleClick(e) {
		switch (e.key) {
			case 'exit':
				this.exit();
				break;
			case '讲师':
				localStorage.setItem("now_userType", '讲师')
				pub.jumpHistory.push('/CourseManage');
				break;
			case '学员':
				localStorage.setItem("now_userType", '学员')
				pub.jumpHistory.push('/');
				break;
			case '管理员':
			    localStorage.setItem("now_userType", '管理员')
				pub.jumpHistory.push('/admin');
				break;
			default:
				break;
		}
	}
	exit() {
		pub.exit();
	}
	changeMenu(page){
		let job = [];
		if (localStorage.getItem("now_userType") === '讲师') {
			pub.user.job.map((item, index) => {
				if (item !== '讲师') job.push(item);
				return true;
			})
		} else {
			pub.user.job.map((item, index) => {
				if (item !== '学员') job.push(item);
				return true;
			})
		}
		this.setState({
			job
		})
	}
	componentWillMount() {
		this.changeMenu(this.props.page);
	}
	componentWillReceiveProps(nextProps) {
		this.changeMenu(nextProps.page);
	}
	render(){
		return(
               <Menu style={{ width: 100 }} mode='vertical' onClick={(e)=>this.handleClick(e)}>
                 {localStorage.getItem("now_userType") === '学员'?
                 <Menu.Item key="newsCenter">
                 <Link to="/NewsCenter">消息中心</Link>
                 </Menu.Item>:null}
                 {pub.user.channelId === '4' ?
                 		<Menu.Item key="privateLetter"><Link to={"/privateLetter"}>私信</Link></Menu.Item>
                 	:null}
                 {pub.user.userType !== '学员'?<SubMenu title="切换身份">
                 {this.state.job.map((item,index)=>{
                 	return(
                 		  <Menu.Item style={{ width: 150 }} className='header_menu' key={item}>{item}</Menu.Item>
                 		)
                 })}
                 </SubMenu>
                 :null}
                 <Menu.Item key="exit">退出登录</Menu.Item>
               </Menu>
			)
	}
}
class Header extends Component {
	constructor(args) {
		super();
		this.state = {
			activeIndex: 0,
			headItems: [
			// {
			// 	href: '/',
			// 	text: '主站',
			// }, 
			// {
			// 	href: '/LearnCenter',
			// 	text: '学习中心',
			// },
			// {
			// 	href: '/GoodArticle',
			// 	text: '蜂行圈',
			// },
			// {
			// 	href: '/Rank',
			// 	text: '排行榜',
			// },
			// {
			// 	href: '/PersonalCenter',
			// 	text: '个人中心',
			// },
			// {
			// 	href: '/StoryLine',
			// 	text: '故事线',
			// },
			// {
			// 	href: '/BroadChannel',
			// 	text: '直播通道',
			// },
			],
			isLogin:true,
			onlineCount:0,
			signDays:0,
			sign:0,
			totalMessages:0
		}
	}
	checkPage(page) {
		if (pub.user == null) {
			pub.jumpHistory.push('/Login');
			return;
		}
		// if(pub.user.userType !== '讲师' && pub.user.userType !== '学员'){
		// 	pub.jumpHistory.push('/admin');
		// 	return;
		// }
		let headItems = [];
		if (page.indexOf('CourseManage') === -1) {
			for (let x of pub.user.menu.learn_menu) {
				headItems.push({
					href: x.runscript,
					text: x.nodeName
				})
			}
		}
		this.setState({
			headItems
		})
		let activeIndex = 0;
		for (let x of headItems) {
			if (x.href === page) {
				break;
			}
			activeIndex++;
		}
		this.setState({
			activeIndex: activeIndex
		})
	}
	componentWillMount() {
		this.checkPage(this.props.page)
		fetch.header().then((data) => {
			if (data.result === 'RC100') {
				this.setState({
					onlineCount:data.onlineCount,
					signDays:data.signDays,
					headPath  :data.headPath,
					sign:data.sign,
					totalMessages:data.totalMessages
				})
			}else{
				message.error(data.errMsg, 3);
			}
		}, (res) => {
			pub.reject(res);
		})

	}
	componentWillReceiveProps(nextProps) {
		this.checkPage(nextProps.page)
	}
	sign(){
		if(this.state.sign === 1){
			// message.error('已签到', 3);
			return;
		}
		fetch.sign().then((data)=>{
			if (data.result === 'RC100') {
				message.success(data.msg,3);
				this.componentWillMount();
			}
			// else{
			// 	message.error(data.errMsg, 3);
			// }
		})
	}
	render() {
		return(
		<div className="header">
			<div className="layout">
				<Link to="/" className="logo"></Link>
				<ul className="page-in">

		           {
		           	this.state.headItems.map((item, index) => {
		           		let className = this.state.activeIndex === index ? 'active' : '';
		           		return (
		           			<li key={index}><Link className={className} 
		           			onClick={()=>{this.setState({activeIndex:index})}}
		           			 to={item.href}>{item.text}</Link></li>
		           		)
		           	})
		           }

				</ul>
				{this.state.isLogin?
				  <div className="header-right">
				    <div className="online-num">当前<span>{this.state.onlineCount}</span>人在线</div>
					<Dropdown trigger={['click']} overlay={<HeaderMenu page={this.props.page} />}>
					<span className="portrait">
					   <img alt='head' onError={(e) => pub.headImageError(e)}  src={pub.getFile(this.state.headPath)} />
					   {this.state.totalMessages!==0?<font></font>:null}
					</span>
					</Dropdown>
					<a className={this.state.sign === 1?'btn sign-btn signed':'btn sign-btn sign'} onClick={()=>this.sign()}>签到</a>
					<p className="sign-info">{pub.getToday()}<br/>已签<span>{this.state.signDays}</span>天</p>
				  </div>
				:
				  <div className="header-right">
					<Link to='/Login' className="btn login-btn">登录</Link>
				  </div>
				}
			</div>
		</div>
			)
	}
}
const mapStateToProps = (state) => {
	return {

	}
}
export default Header;
